.tab-container {
  padding: 20px;

  .tab-bar {
    display        : flex;
    justify-content: flex-end;
    margin-bottom  : 20px;

    .bar-item {
      margin   : 0px 6px;
      font-size: 13px;
      color    : darkgray;
    }
  }

  .tab-content {
    padding: 0px 5px;

    .items {
      display        : flex;
      flex-wrap      : wrap;
      justify-content: space-around;

      .item {
        min-width: 15%;
        max-width: 20%;
        width    : 18%;
        margin-bottom: 20px;


        .img-warp {
          position     : relative;
          border-radius: 3px;
          overflow     : hidden;

          .num-warp {
            position  : absolute;
            transform: translate3d(0px,-25px,0px);
            width     : 100%;
            background: rgba(0, 0, 0, 0.5);
            color     : white;
            font-size : 12px;
            padding   : 3px;
            opacity: 0.1;

            .num {
              color: white;
            }
          }

          img {
            border-radius: 3px;
            overflow     : hidden;
            width        : 100%;
          }

          .iconfonts {
            position: absolute;
            bottom: 5px;
            right: 10px;
            font-size: 30px;
            opacity: 0;
          }
        }



        .name {
          font-size         : 14px;
          color             : #666565;
          overflow          : hidden;
          text-overflow     : ellipsis;
          display           : -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }


      .item :hover .num-warp{
        transition: all 0.6s;
        opacity: 1;
        transform: translate3d(0px,-0px,0px);
        // background-color: red;
      }

      .item :hover .iconfonts{
        transition: all 0.6s;
        // opacity: 1;
        // transform: translate3d(0px,-0px,0px);
        // color: red;
        opacity: 0.9;
        // background-color: red;
      }
    }
  }

  .tab-footer{
    text-align: center;
    margin-top: 10px;
  }
}